<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>emp</title>
</head>
    <script src="util.js"></script>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
<body>


    <div id="app">
        <form>
            <input type="text" v-model="searchMap">
            <input type="button" @click="findPage(1)" value="搜索"><br>

            <input type="button" value="添加" @click="toadd()">
            <table border="1" cellspacing="0">
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>地址</td>
                    <td>生日</td>
                    <td>操作</td>
                </tr>
                <tr v-for="emp in page.records">
                    <td>{{emp.ename}}</td>
                    <td v-if="emp.sex=='1'"><p>男</p></td>
                    <td v-if="emp.sex=='2'"><p>女</p></td>
                    <td>{{emp.address}}</td>
                    <td>{{emp.birthday}}</td>
                    <td>
                        <input type="button" value="删除" @click="del(emp.eid)">
                        <input type="button" value="编辑" @click="updateEmp(emp.eid)">
                    </td>
                </tr>
            </table>
            <p>当前第{{page.current}}页/共{{page.pages}}页/有{{page.total}}条数据</p>
            <input type="button" value="首页" @click="findPage(1)">
            <input type="button" value="上一页" @click="findPage(page.current-1)" v-if="page.current>1">
            <input type="button" value="下一页" @click="findPage(page.current+1)" v-if="page.current<page.pages">
            <input type="button" value="尾页" @click="findPage(page.pages)">
        </form>

    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                page:{},
                searchMap:""

            },
            created(){
                this.findPage(1)
            },
            methods:{
                findPage(pageNum){
                    axios.post("/emp/findPage?searchMap="+this.searchMap+"&pageNum="+pageNum).then(
                        res=>{
                            this.page=res.data
                            // this.page.pages=(this.page.total)/(this.page.size);
                        }
                    )
                },
                del(eid){
                    axios.post("/emp/delete?eid="+eid).then(
                        location.href="emp.html"
                    )
                },
                updateEmp(eid){
                        location.href="update.html?eid="+eid
                },
                toadd(){
                    location.href="add.html"
                }
            }
        })
    </script>
</body>
</html>